<html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading"> 分段读取文件：</div>
        <div class="panel-body">
            <input type="file" id="fileId" /><br />
            <input type="button" value="中止" onclick="stop();" /> <br />
            <input type="button" value="继续" onclick="goon();" />
            <progress id="progressOne" style="width:400px;" max="100" value="0"></progress>
            <blockquote id="status" style="word-break:break-all;"></blockquote>
        </div>
        <div>
            <a href="https://github.com/zhengshuxin/acl/tree/master/lib_acl_cpp/samples/websocket/upload_server" target=_blank>源码</a>
        </div>
    </div>
</div>

<script language="javascript" type="text/javascript">
    var g_url = null;
    var g_ws = null;
    var g_fileBox = document.getElementById('fileId');
    var g_reader = null;
    var g_step = 1024 * 128;
    var g_loaded = 0;
    var g_total = 0;
    var g_file = null;
    var g_enableRead = true;

    g_fileBox.onchange = function() {
        g_file = this.files[0];
        g_total = g_file.size;
        if (g_ws == null)
            createSocket(function() { bindReader(); });
        else
            bindReader();
    }

    function bindReader() {
        g_loaded = 0;
        g_reader = new FileReader();
        g_reader.onload = function(e) {
            if (g_enableRead == false)
                return;
            if (g_ws.bufferedAmount > g_step * 10)
                setTimeout(function() { loadSuccess(e.loaded); }, 100);
            else
                loadSuccess(e.loaded);
        }

        readBlob();
    }

    function loadSuccess(loaded) {
        var blob = g_reader.result;
        if (g_loaded == 0) {
            g_ws.send(g_file.name);
            var len = "" + g_file.size;
            g_ws.send(len);
        }

        g_ws.send(blob);
        g_loaded += loaded;

        if (g_loaded < g_total)
            readBlob();
        var percent = Math.round((g_loaded * 100) / g_total);
        document.getElementById('status').innerText = percent + "%";
        document.getElementById('progressOne').value = percent;
    }

    function readBlob() {
        var blob = g_file.slice(g_loaded, g_loaded + g_step);
        g_reader.readAsArrayBuffer(blob);
    }

    function stop() {
        g_enableRead = false;
        g_reader.abort();
    }

    function goon() {
        g_enableRead = true;
        readBlob();
    }

    function createSocket(onSuccess) {
        g_ws = new WebSocket(g_url);
        g_ws.onopen = function() {
            if (onSuccess)
                onSuccess();
            g_ws.onmessage = function(e) {}
        }
        g_ws.onclose = function(e) { g_ws.close(); g_ws = null; }
        g_ws.onerror = function(e) { g_ws.close(); g_ws = null; }
    }

    function test() {
        var o = document.getElementById('fileId');
        alert("o: " + o);
    }
    </script>
</body>
</html>
